import VText from '@library/vue2/src/text/text.vue'
import type { Meta, StoryObj } from '@storybook/vue'

const meta: Meta<typeof VText> = {
  title: '组件/基础/Text',
  tags: ['autodocs']
}

export default meta

type Story = StoryObj<typeof VText>

export const ControlStory: Story = {
  name: '受控演示',
  render: (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { VText },
    template: '<v-text v-bind="$props">Text</v-text>'
  }),
  argTypes: {
    type: {
      description: '类型',
      default: '',
      control: { type: 'select' },
      options: ['primary', 'success', 'info', 'danger', 'warning']
    },
    size: {
      description: '尺寸',
      default: '',
      control: { type: 'select' },
      options: ['large', 'small', '']
    },
    truncated: {
      description: '截断',
      default: false,
      type: 'boolean'
    },
    tag: {
      description: '标签',
      default: '',
      type: 'string'
    }
  }
}

export const BasicStory: Story = {
  name: '基础用法',
  render: () => ({
    components: { VText },
    template: `
      <div class="demo">
        <v-text class="mx-1">Default</v-text>
        <v-text class="mx-1" type="primary">Primary</v-text>
        <v-text class="mx-1" type="success">Success</v-text>
        <v-text class="mx-1" type="info">Info</v-text>
        <v-text class="mx-1" type="warning">Warning</v-text>
        <v-text class="mx-1" type="danger">Danger</v-text>
      </div>
    `
  })
}

export const SizeStory: Story = {
  name: '尺寸',
  render: () => ({
    components: { VText },
    template: `
      <div class="demo">
        <v-text class="mx-1" size="large">Large</v-text>
        <v-text class="mx-1">Default</v-text>
        <v-text class="mx-1" size="small">small</v-text>
      </div>
    `
  })
}

export const TagStory: Story = {
  name: '标签',
  render: () => ({
    components: { VText },
    template: `
      <div class="demo">
        <div>
          <div>
            <v-text>span</v-text>
          </div>
          <div>
            <v-text tag="p">This is a paragraph.</v-text>
          </div>
          <div>
            <v-text tag="b">Bold</v-text>
          </div>
          <div>
            <v-text tag="i">Italic</v-text>
          </div>
          <div>
            <v-text>
              This is
              <v-text tag="sub" size="small">subscript</v-text>
            </v-text>
          </div>
          <div>
            <v-text>
              This is
              <v-text tag="sup" size="small">superscript</v-text>
            </v-text>
          </div>
          <div>
             <v-text tag="ins">Inserted</v-text>
          </div>
          <div>
             <v-text tag="del">Deleted</v-text>
          </div>
          <div>
             <v-text tag="mark">Marked</v-text>
          </div>
        </div>
      </div>
    `
  })
}

export const TruncatedStory: Story = {
  name: '截断',
  render: () => ({
    components: { VText },
    template: `
      <div class="demo">
        <v-text class="w-100" truncated>Self element set width 100px</v-text>
        <div class="w-100">
          <v-text truncated>Squeezed by parent element</v-text>
        </div>
      </div>
      `
  })
}
